<template>
	<div>
		<div id="process-design">
			<div class="top">
				<div class="left">
					<div class="title" style="position: relative">
						流程设计
						<tips
							:is-auto-about-post="true"
							:is-auto-up-down-post="true"
							TipsCode="002002004"
							scale="0.7"
							y="0"
							x="80"
							table-width="470"
							icon="QuestionFilled"
							content-post="left"
						>
						</tips>
					</div>
					<div>设计：{{ routeParams.FlowName }} &nbsp;&nbsp;&nbsp;&nbsp;ID：{{ routeParams.FlowID }}</div>
				</div>
				<div class="right">
					<el-button type="primary">
						<img src="../../../../assets/icon/code.svg" alt="" style="width: 15px" />
						&nbsp;编译</el-button
					>
					<el-button type="success"
						><img src="../../../../assets/icon/goujian.svg" alt="" style="width: 15px" />
						&nbsp;构建
					</el-button>
				</div>
			</div>
			<div class="main">
				<div class="nodes-area">
					<div ref="startEndFbRef" class="StartEndFB">
						<!-- <div data-FBName="start-fb" data-descption="开始" class="fb-node"><div>开始</div></div> -->
						<div class="fb-node" data-FBName="end-fb" data-descption="结束"><div>结束</div></div>
						<div class="fb-node" data-FBName="session-end-fb" data-descption="会话结束"><div>会话结束</div></div>
					</div>
					<div :class="!flowFunPiece ? 'close' : ''" class="nodes">
						<div class="label">
							流程功能块
							<component :is="flowFunPiece ? ArrowDown : ArrowRight" style="cursor: pointer; width: 15px" @click="handleShowflowFun" />
						</div>
						<el-scrollbar wrap-style="overflow-x:hidden;">
							<div ref="leftNavRef" class="node-box">
								<div
									v-for="(node, index) in nodeTypeList"
									:key="index"
									:data-FBName="node.FBName"
									:data-descption="node.Descption"
									:data-id="node.id"
									:data-class="node.class"
									:data-input-vars="node.InputVars"
									:data-output-vars="node.OutputVars"
									:data-lang="node.Lang"
									:data-remarks="node.Remarks"
									:class="node.class"
									class="left-item"
								>
									<div class="left-node">
										{{ node.Descption }}
									</div>
								</div>
								<div style="text-align: center">
									<el-button type="text" icon="el-icon-plus" @click="addFlowPiecedialog = true">添加流程功能块</el-button>
								</div>
							</div>
						</el-scrollbar>
					</div>
					<div class="other-fun-piece">
						<el-tabs v-model="currentFBType" @tab-click="handleClickFBType">
							<el-tab-pane label="基础功能块" name="0">
								<el-scrollbar :class="!otherFunPiece ? 'close' : ''" wrap-style="overflow-x:hidden;">
									<div class="tree" style="margin-top: 20px">
										<!-- <tree
											ref="elTreeRef"
											:data="otherFBData"
											:props="defaultProps"
											draggable
											@node-click="handleNodeClick"
											@node-drag-end="handleNodeDragEnd"
										/> -->
									</div>
								</el-scrollbar>
							</el-tab-pane>
							<el-tab-pane label="自定义功能块" name="1">
								<el-scrollbar :class="!otherFunPiece ? 'close' : ''" wrap-style="overflow-x:hidden;">
									<div class="tree" style="margin-top: 20px">
										<!-- <tree
											ref="elTreeRef"
											:data="otherFBData"
											:props="defaultProps"
											draggable
											@node-click="handleNodeClick"
											@node-drag-end="handleNodeDragEnd"
										/> -->
									</div>
								</el-scrollbar>
							</el-tab-pane>
							<el-tab-pane label="项目功能块" name="3">
								<el-scrollbar :class="!otherFunPiece ? 'close' : ''" wrap-style="overflow-x:hidden;">
									<div class="tree" style="margin-top: 20px">
										<!-- <tree
											ref="elTreeRef"
											:data="otherFBData"
											:props="defaultProps"
											draggable
											@node-click="handleNodeClick"
											@node-drag-end="handleNodeDragEnd"
										/> -->
									</div>
								</el-scrollbar>
							</el-tab-pane>
						</el-tabs>
					</div>
				</div>
				<div class="flow-ctl-area">
					<div class="card-box">
						<el-card class="card-item">
							<template #header>
								<div class="head">
									<span>常量定义(c)</span>
									<span>示例：c.Ret_Success</span>
								</div>
							</template>

							<div v-for="(item, index) in consts" :key="item.ConstName + index" class="itme_var">
								<el-popover :content="'value:' + item.Value" placement="top-start" trigger="hover">
									<template #reference>
										<span @dblclick="handleEditConst(item)">
											{{ item.ConstName }}
										</span>
									</template>
								</el-popover>
							</div>
							<el-button type="text" @click="handleAddConst">添加常量</el-button>
						</el-card>
						<el-card class="card-item">
							<template #header>
								<div class="head">
									<span>流程变量(s)</span>
									<span>示例：s.Base.SessionID</span>
								</div>
							</template>
						</el-card>
						<el-card class="card-item">
							<template #header>
								<div class="head">
									<span>全局变量(g)</span>
									<span>示例：g.EntCode</span>
								</div>
							</template>
						</el-card>
					</div>
					<div class="flow-box">
						<template v-for="(flow, index) in flowEventList" :key="'flow-box' + index">
							<div class="event-var">
								<div class="label">事件变量</div>
								<div class="params">
									<span>{{ flowEventList[index] && flowEventList[index].Vars ? flowEventList[index].Vars : '' }}</span>
									<el-button
										type="text"
										@click="
											() => {
												addEventVarDialog = true;
												isEditEventVar = false;
												currentEventVarIndex = index;
											}
										"
										>添加变量</el-button
									>
								</div>
								<el-button type="primary" :icon="Edit" @click="handleAddOrUpdateEvent(false, index)">修改</el-button>
							</div>
							<div ref="flowRefs" :id="'workflow-' + (index + 1)" class="flow-item">
								<template v-if="jsplumbData[index] && jsplumbData[index].nodeList">
									<div
										v-for="(node, i) in jsplumbData[index].nodeList"
										:key="node.fbname"
										:id="node.fbname"
										:data-node-id="node.fbname"
										:style="{ left: node.left, top: node.top }"
										:class="[node.class, currentIndex === i + '-' + index ? 'active' : '']"
										class="node"
										@click="handleFlowNode(i + '-' + index)"
										@dblclick="handleCallFB(node, index)"
										@contextmenu.prevent="handleNodeContextMenu(node, $event)"
										@mouseover="handleNodeMouseover($event, node)"
										@mouseout="handleNodeMouseout"
									>
										<el-icon :size="20"><Help class="workflow-icon-drag" /></el-icon>

										<span v-if="node.CallFBID === 0" style="text-align: center">ID:{{ node.CallFBID }}{{ node.descption }}</span>
										<span v-else>ID:{{ node.CallFBID }}<br />{{ node.descption }}</span>
									</div>
								</template>
							</div>
						</template>
						<el-button type="primary" :icon="Edit" style="margin-top: 10px" @click="handleSCodeEditor('Init')"> 修改初始化 </el-button>
						<el-button type="primary" :icon="Edit" style="margin-top: 10px" @click="handleSCodeEditor('Timeout')"> 修改超时处理 </el-button>
						<el-button type="primary" :icon="Plus" style="margin-top: 10px" @click="handleAddOrUpdateEvent(true)"> 添加处理事件 </el-button>
					</div>
				</div>
			</div>
		</div>
		<!-- 线右键菜单 -->
		<Contextmenu ref="contextmenuLineRef" :dropdown="dropdownLine" @current="onCurrentLineClick" />
		<Contextmenu ref="contextmenuNodeRef" :dropdown="dropdownNode" @current="onCurrentNodeClick" />
		<!-- 抽屉表单、线 -->
		<Drawer ref="drawerRef" @label="setLineLabel" @deleteConnectionLine="deleteConnectionLine" />

		<!-- 添加事件变量 -->
		<el-dialog
			v-if="addEventVarDialog"
			v-model="addEventVarDialog"
			:title="`${isEditEventVar ? '修改' : '添加'}事件变量`"
			width="30%"
			close-on-click-modal
		>
			<div style="margin-bottom: 10px; color: #f56c6c">多个变量请用英文逗号(,)隔开。示例：Msg,Num</div>
			<el-input v-model="flowEventList[currentEventVarIndex!].Vars" placeholder="请输入事件变量" />
			<template #footer>
				<span>
					<el-button @click="addEventVarDialog = false">取 消</el-button>
					<el-button type="primary" @click="handleEventVarSubmit">确 定</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 添加流程功能块 -->
		<el-dialog destroy-on-close v-model="addFlowPiecedialog" :close-on-click-modal="false" title="添加流程功能块" width="30%">
			<el-form ref="addFlowPieceRef" :model="addFlowPieceData" :rules="addFlowPieceDataRules" label-width="100px">
				<el-form-item prop="FBName" label="名称">
					<el-input v-model="addFlowPieceData.FBName" placeholder="名字只能用字母或者下划线组合" />
				</el-form-item>
				<el-form-item prop="Descption" label="显示名">
					<el-input v-model="addFlowPieceData.Descption" placeholder="请输入显示名" />
				</el-form-item>
				<el-form-item prop="Lang" label="编程语言">
					<el-radio-group v-model="addFlowPieceData.Lang">
						<el-radio :label="'CS'">CS</el-radio><el-radio :label="'FBD'">FBD</el-radio>
					</el-radio-group>
					<el-popover
						:virtual-ref="PLInfoRef"
						placement="top-start"
						width="400"
						height="100"
						trigger="hover"
						content="(CS:与JS类似的C扩展脚本语言，FBD：功能块图)"
					/>
					<template #label>
						<el-icon ref="PLInfoRef" :size="18" style="margin-top: 10px"><InfoFilled /></el-icon>
						<span>编程语言 </span>
					</template>
				</el-form-item>
				<el-form-item label="输入列表">
					<el-input v-model="addFlowPieceData.InputVars" />
					<el-popover
						:virtual-ref="inputListInfoRef"
						placement="top-start"
						width="400"
						height="100"
						trigger="hover"
						content="(功能块的输入列表，用逗号分割，如 IN1,IN2)"
					/>
					<template #label>
						<el-icon ref="inputListInfoRef" :size="18" style="margin-top: 10px"><InfoFilled /></el-icon>
						<span>输入列表</span>
					</template>
				</el-form-item>
				<el-form-item label="输出列表">
					<el-input v-model="addFlowPieceData.OutputVars" />
					<el-popover
						:virtual-ref="outputListInfoRef"
						placement="top-start"
						width="400"
						height="100"
						trigger="hover"
						content="(功能块的输出列表，用逗号分割，如 OUT1,OUT2)"
					/>
					<template #label>
						<el-icon ref="outputListInfoRef" :size="18" style="margin-top: 10px"><InfoFilled /></el-icon>
						<span>输出列表</span>
					</template>
				</el-form-item>
				<el-form-item prop="Remarks" label="备注">
					<el-input v-model="addFlowPieceData.Remarks" />
				</el-form-item>
			</el-form>
			<template #footer>
				<span>
					<el-button @click="addFlowPiecedialog = false">取 消</el-button>
					<el-button type="primary" @click="handleAddFlowPiece">确 定</el-button>
				</span>
			</template>
		</el-dialog>

		<!-- 调用功能块 -->
		<el-dialog destroy-on-close v-model="funcPieceCalldialog" :close-on-click-modal="false" title="调用功能块" width="40%">
			<FuncPieceCall ref="FBCallRef" />
			<template #footer>
				<span>
					<el-button @click="funcPieceCalldialog = false">取 消</el-button>
					<el-button type="primary" @click="handleFuncPieceCall">确 定</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 添加 or 修改常量 -->
		<el-dialog destroy-on-close v-model="constDialog" :title="isAddConst ? '添加' : '修改'" :close-on-click-modal="false" width="40%">
			<el-form :model="currentConst" label-width="100px">
				<el-form-item label="ConstName"><el-input v-model="currentConst.ConstName" clearable /></el-form-item>
				<el-form-item label="Value"><el-input v-model="currentConst.Value" clearable /></el-form-item>
				<el-form-item label="Remarks">
					<el-input v-model="currentConst.Remarks" type="textarea" clearable />
				</el-form-item>
			</el-form>
			<template #footer>
				<span>
					<el-button @click="constDialog = false">取 消</el-button>
					<el-button type="primary" @click="handleSubmitConst">确 定</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 添加处理事件 -->
		<el-dialog destroy-on-close v-model="eventhandlerDialog" :title="isAddEventhandler ? '添加' : '修改'" :close-on-click-modal="false" width="40%">
			<EventHandler ref="eventHandlerRef" />
			<template #footer>
				<span>
					<el-button @click="eventhandlerDialog = false">取 消</el-button>
					<el-button type="primary" @click="handleSubmitEvent">确 定</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 编辑脚本 -->
		<el-dialog destroy-on-close v-model="isCodeEditorDialog" :close-on-click-modal="false" title="脚本编辑" width="40%">
			<CodeEditor style="height: 400px" ref="sCodeEditorRef" :keyword="keyword" v-model="CSCode" />
			<template #footer>
				<span>
					<el-button @click="handleCSCodeClose">取 消</el-button>
					<el-button type="primary" @click="handleSubmitCSCode">确 定</el-button>
				</span>
			</template>
		</el-dialog>
		<!--
      功能块详情
     -->
		<el-dialog id="fbDatailDialog" v-model="isFBDateildialog" title="详情">
			<div class="datail-val">ID：{{ FBDateilData.CallFBID }}</div>
			<el-divider />
			<div class="datail-val">FBName：{{ FBDateilData.fbname }}</div>
			<el-divider />
			<div class="datail-val">Descption：{{ FBDateilData.descption }}</div>
			<el-divider />
			<div class="datail-val">TriggerCond：{{ FBDateilData.TriggerCond || '没有连线' }}</div>
			<el-divider />
			<div class="datail-val">
				<span>inputVals：</span>
				<el-tabs v-model="activeInputVal">
					<el-tab-pane v-for="(value, key) in FBDateilData.inputVars" :key="key" :label="key" :name="key">{{ value || '暂无数据' }}</el-tab-pane>
				</el-tabs>
			</div>
			<el-divider />
			<div class="datail-val">
				<span>执行前操作脚本 </span>
				<CodeEditor style="height: 230px" :modelValue="FBDateilData.PreCode" :readOnly="true" />
			</div>
			<el-divider />
			<div class="datail-val">
				<span>执行后操作脚本</span>
				<CodeEditor style="height: 230px" :modelValue="FBDateilData.AfterCode" :readOnly="true" />
			</div>
		</el-dialog>
	</div>
</template>
<script lang="ts" setup name="flowDesign">
import { ref } from 'vue';
import { LocationQuery, useRoute } from 'vue-router';
import { Edit, Plus, ArrowDown, ArrowRight, Help, InfoFilled } from '@element-plus/icons-vue';
import { httpReqeustApi } from '/@/api/linxyun/base';
import { jsplumbDefaults, jsplumbMakeSource, jsplumbMakeTarget, jsplumbConnect } from './config';
import CodeEditor from '/@/components/Linxyun/customModule/custom/codeEditor/index.vue';
import Tips from '/@/components/tips/tips.vue';
import Contextmenu from './cpns/contextmenu/index.vue';
import Drawer from './cpns/drawer/index.vue';
import FuncPieceCall from './cpns/funcPieceCall/index.vue';
import EventHandler from './cpns/eventHandler/index.vue';
import { ElMessage } from 'element-plus';
// import Tree from './cpns/tree';
import useConstDefine from './hooks/useConstDefine';
import useFlowEvent from './hooks/useFlowEvent';
import useLeftFlowBlock from './hooks/useLeftFlowBlock';
interface IState {
	nodeTypeList: Record<string, any>[];
	jsPlumbInst: any[];
	otherFunPiece: boolean;
	otherFBData: any[];
	defaultProps: Record<string, any>;
	addFlowPieceDataRules: Record<string, any>;
	isAddConst: boolean;
	routeParams: LocationQuery;
	keyword: {
		e: string[]; // 事件变量
		g: string[]; // 全局变量
		s: string[]; // 会话变量
		c: string[]; // 常量
		fbnameList: string[]; // 流程块名称
	};
	currentFBType: string;
}
const route = useRoute();
const httpRequest = httpReqeustApi();
// 获取路由参数
const routeParams = route.query;

const state = reactive<IState>({
	jsPlumbInst: [],
	nodeTypeList: [
		// {
		//   nodeId: 'node_big_rectangle',
		//   class: 'big-rectangle',
		//   name: '大的长方形',
		//   id: 1
		// },
		// {
		//   nodeId: 'node_small_rectangle',
		//   class: 'small-rectangle',
		//   name: '小的长方形',
		//   id: 2
		// },
		// {
		//   nodeId: 'node_circle',
		//   class: 'circle',
		//   name: '圆形',
		//   id: 3
		// }
	],
	otherFunPiece: true,
	otherFBData: [
		// {
		//   Descption: '一级 1',
		//   children: [
		//     {
		//       FBName: 'xxx',
		//       FBType: 0,
		//       FlowID: '',
		//       Descption: '二级 1-1',
		//       InputVars: '',
		//       OutputVars: ''
		//     }
		//   ]
		// }
	],
	defaultProps: {
		children: 'children',
		label: 'Descption',
	},
	addFlowPieceDataRules: {
		FBName: [
			{ required: true, message: '请输入名称', trigger: 'blur' },
			{
				validator: ruleLetterUnderline,
				trigger: 'blur',
			},
		],
		Descption: [{ required: true, message: '请输入名称', trigger: 'blur' }],
		Lang: [{ required: true, message: '请选择编程语言', trigger: 'blur' }],
		InputVars: [{ required: true, message: '请输入输入列表', trigger: 'blur' }],
		OutputVars: [{ required: true, message: '请输入输出列表', trigger: 'blur' }],
	},
	isAddConst: true,
	routeParams: {},
	keyword: {
		// 所有关键字
		e: [], // 事件变量
		g: [], // 全局变量
		s: [], // 会话变量
		c: [], // 常量
		fbnameList: [], // 流程块名称
	},
	currentFBType: '0',
});

const { nodeTypeList, currentFBType, otherFunPiece, otherFBData, defaultProps, addFlowPieceDataRules, isAddConst } = toRefs(state);

// 校验 字母 数字 下划线
function ruleLetterUnderline(rule, value, callback) {
	if (!/^[A-Za-z_]+$/.test(value)) {
		callback(new Error('事件名称必须是字母,下划线'));
	} else if (value.toLowerCase() === 'flowendfuncblock' || value.toLowerCase() === 'sessionendfuncblock') {
		callback(new Error('当前名称已经存在，不可以使用改字符作为名称'));
	} else {
		callback();
	}
}

const PLInfoRef = ref();
const inputListInfoRef = ref();
const outputListInfoRef = ref();
// 初始化页面数据
const initData = async () => {
	// 请求常量定义
	queryCountDefine();
	// 查询流程事件
	handleQueryFlowEvent();
	// 请求流程功能块
	const FlowFBData = await handleQueryFlowPiece(2);
	// 请求基本功能块
	const otherFBData = await handleQueryFlowPiece(0);
	state.otherFBData = toFBDataTransTreeData(otherFBData);
	state.nodeTypeList = FlowFBData.map((item) => {
		// 将功能块名称保存到关键字中
		state.keyword.fbnameList.push(item.FBName);
		return {
			FBName: item.FBName,
			class: 'small-rectangle',
			Descption: item.Descption,
			id: item.FBName,
			InputVars: item.InputVars,
			OutputVars: item.OutputVars,
			Lang: item.Lang,
			Remarks: item.Remarks,
		};
	});
	console.log('nodeTypeList:', [...state.nodeTypeList]);
	await handleQueryFlowEventFBD({ FlowID: routeParams.FlowID }, state.nodeTypeList);
};

// 通过类型查询指定功能块
const handleFb = async (type) => {
	const data = await handleQueryFlowPiece(type);
	state.otherFBData = toFBDataTransTreeData(data);
};
// 切换其他功能块的方法
const handleClickFBType = (val) => {
	console.log(val);
	if (val.name !== '3') handleFb(val.name);
};

// 定义常量hook
const { consts, currentConst, constDialog, queryCountDefine, handleEditConst, handleAddConst, handleSubmitConst } = useConstDefine(
	routeParams,
	state.keyword.c
);

// 流程事件相关的函数及变量
const {
	dragFBToEventIndex,
	currentIndex,
	currentFlowAreaID,
	dropdownLine,
	dropdownNode,
	jsplumbData,
	currentPushLineListIndex,
	eventhandlerDialog,
	isAddEventhandler,
	flowEventList,
	EditCallFB,
	funcPieceCalldialog,
	CSCode,
	isCodeEditorDialog,
	EventType,
	eventHandlerRef,
	FBDateilData,
	isFBDateildialog,
	activeInputVal,
	FBCallRef,
	addEventVarDialog,
	currentEventVarIndex,
	isEditEventVar,
	drawerRef,
	contextmenuLineRef,
	contextmenuNodeRef,
	createJsPlumbInst,
	initJsPlumbConnection,
	handleNodeContextMenu,
	onCurrentLineClick,
	onCurrentNodeClick,
	setLineLabel,
	handleFlowNode,
	handleQueryFlowEvent,
	handleAddOrUpdateEvent,
	handleQueryFlowEventFBD,
	handleSCodeEditor,
	handleCSCodeClose,
	handleSubmitCSCode,
	handleSubmitEvent,
	handleNodeMouseover,
	handleNodeMouseout,
	handleCallFB,
	handleFuncPieceCall,
	handleEventVarSubmit,
	deleteConnectionLine,
} = useFlowEvent(state.jsPlumbInst, routeParams, state.keyword);

onMounted(async () => {
	await initData();
	// 根据 N 个流程事件创建 N 个 JsPlumb 实例
	console.log('mounted', flowEventList.value);
	for (let i = 0; i < flowEventList.value.length; i++) {
		state.jsPlumbInst.push(createJsPlumbInst(i));
	}

	for (let i = 0; i < state.jsPlumbInst.length; i++) {
		// 初始化节点、线的链接
		nextTick(() => {
			initJsPlumbConnection(i);
		});
	}
	console.log('FBCallRef:', FBCallRef);
	// 初始化左侧功能块区域
	initSortable(EditCallFB, FBCallRef);
});
const {
	leftNavRef,
	startEndFbRef,
	flowFunPiece,
	addFlowPieceRef,
	addFlowPiecedialog,
	addFlowPieceData,
	initSortable,
	handleQueryFlowPiece,
	toFBDataTransTreeData,
	handleShowflowFun,
	handleAddFlowPiece,
} = useLeftFlowBlock(dragFBToEventIndex, jsplumbData.value, state.jsPlumbInst, funcPieceCalldialog, nodeTypeList, routeParams);
</script>
<style lang="scss" scoped>
#process-design {
	padding: 10px 20px;
	color: #303133;
	background-color: #fff;
	border-radius: 4px;
	border: 1px solid var(--el-border-color-light, #ebeef5);
	height: calc(100vh - 130px);
	overflow: hidden;
}
.top {
	display: flex;
	justify-content: space-between;

	.title {
		font-size: 25px;
		font-weight: 700;
		margin-bottom: 10px;
	}
	.right {
		.el-button ::deep(span) {
			display: flex;
		}
	}
}
.main {
	display: flex;
	width: 100%;
	min-height: calc(100vh - 180px);
	margin-top: 10px;

	.nodes-area {
		width: 18%;
		min-width: 330px;
		margin-right: 10px;
		.StartEndFB {
			border: 1px solid #ccc;
			display: flex;
			margin-bottom: 10px;
			border-radius: 5px;
			justify-content: space-around;
			padding: 10px 10px;
			font-size: 12px;
			.fb-node {
				cursor: move;
				&:first-child {
					margin-right: 10px;
				}
			}
		}
		.nodes {
			height: 300px;
			overflow-x: hidden;
			overflow-y: auto;
			border: 1px solid #ccc;
			transition: all 0.5s ease-in;
			display: flex;
			flex-direction: column;
		}
		.nodes.close {
			height: 40px;
			overflow: hidden;
		}
		.label {
			height: 40px;
			padding: 0 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.node-box {
			height: 100px;
		}
		.node-box.close {
			height: 0;
			overflow: hidden;
		}

		.other-fun-piece {
			border: 1px solid #ccc;
			height: calc(100% - 430px);
			margin-top: 10px;
			background: #fff;
			display: flex;
			flex-direction: column;
			.el-tabs__item {
				padding: 0 15px;
			}
			.el-tabs ::deep(.el-tabs__nav) {
				transform: translateX(12px) !important;
			}
			.el-tabs .el-tabs__nav {
				font-size: 15px;
			}

			.btns {
				margin-top: 5px;
				display: flex;
				justify-content: space-evenly;
				align-items: center;
				padding: 5px 0;
				background: #fff;

				.el-button {
					margin-left: 0px;
					padding: 5px 12px;
				}
				// .el-button:first-child {
				//   margin-left: 10px;
				// }
			}
			.el-scrollbar {
				overflow-y: auto;
				flex: 1;
				transition: all 0.5s ease-in;

				&.close {
					flex: 0;
				}
			}
		}
	}
	.flow-ctl-area {
		flex: 1;
		.card-box {
			display: flex;
			.card-item {
				flex: 1;
			}
			.card-item:nth-child(2) {
				margin: 0 10px;
			}
			.head {
				display: flex;
				justify-content: space-between;
			}
			.itme_var {
				display: inline-block;
				cursor: pointer;
			}
		}
		.flow-box {
			height: calc(100vh - 315px);
			overflow-y: auto;
			margin-top: 10px;
			.flow-item {
				margin-top: 10px;
				margin-bottom: 10px;
				width: 100%;
				height: 230px;
				border: 1px solid #ccc;
				flex-grow: 1;
				background-image: url(../../../assets/image/point.83896130.png);
				overflow: hidden;
			}
			.event-var {
				height: 44px;
				display: flex;

				.label {
					width: 80px;
					height: 100%;
					background: #e4e7ed;
					display: flex;
					justify-content: center;
					align-items: center;
					border-left: 1px solid #ccc;
					border-top: 1px solid #ccc;
					border-bottom: 1px solid #ccc;
					border-top-left-radius: 5px;
					border-bottom-left-radius: 5px;
					font-size: 15px;
				}
				.params {
					padding: 0 10px;
					flex: 1;
					display: flex;
					align-items: center;
					margin-right: 10px;
					border: 1px solid #ccc;
					border-top-right-radius: 5px;
					border-bottom-right-radius: 5px;
					span {
						margin-right: 10px;
					}
				}
			}
		}
	}
}
.other-fun-piece,
.nodes,
.flow-item,
.event-var {
	border-radius: 5px;
	-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.left-item {
	display: inline-block;
	width: calc(50% - 15px);
	position: relative;
	cursor: move;
	margin: 0 0 10px 10px;
	font-size: 12px;
}

.left-node,
.fb-node div {
	height: 35px;
	display: flex;
	align-items: center;
	transition: all 0.3s ease;
	padding: 5px 10px;
	border: 1px dashed transparent;
	background: #f3f5ff;
	border-radius: 3px;
}
.left-node {
	width: 149px;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.left-node:hover,
.fb-node div:hover {
	border: 1px dashed #409eff;
	background: #ebf5ff;
	color: #409eff;
	transition: all 0.3s ease;
	border-radius: 5px;
}

.big-rectangle-flow,
.small-rectangle-flow,
.circle-flow {
	border: 1px solid var(--el-border-color-light, #ebeef5);
	background: #fff;
	border-radius: 5px;
	transition: border 0.3s ease;
}
.big-rectangle-flow {
	width: 120px;
	height: 60px;
}

.small-rectangle-flow {
	width: 100px;
	height: 50px;
	span {
		width: 70px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}
.circle-flow {
	width: 60px;
	height: 60px;
	border-radius: 50%;
}
.flow-item {
	position: relative;
}
.node {
	position: absolute;
	cursor: move;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	.workflow-icon-drag {
		cursor: crosshair;
	}
}
::deep(.jtk-overlay:not(.aLabel)) {
	padding: 4px 10px;
	border: 1px solid var(--el-border-color-light, #ebeef5) !important;
	color: var(--el-text-color-secondary) !important;
	background: #fff;
	border-radius: 3px;
	font-size: 12px;
}
.active {
	border: 1px dashed #409eff !important;
	background: #ebf5ff !important;
	color: #409eff !important;
}
.node:hover {
	border: 1px dashed #409eff;
	background: #ebf5ff;
	color: #409eff;
}
.el-scrollbar {
	width: 100%;
	flex: 1;
}
::-webkit-scrollbar {
	display: none; /* Chrome Safari */
}
.el-scrollbar .el-scrollbar__wrap {
	overflow-x: hidden !important;
}
.start-node-flow {
	width: 40px;
	height: 80px;
	border: 1px solid var(--el-border-color-light, #ebeef5);
	background-color: #e1f3d8;
	border-radius: 5%;
	display: flex;
	flex-direction: column;
}
.datail-val {
	font-size: 16px;
	// line-height: 26px;
	::deep(.CodeMirror) {
		height: 180px;
	}
}
#fbDatailDialog {
	::deep(.el-dialog) {
		height: 70%;
	}
}
</style>
